<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form :disabled="disabled" :inline="true" class="demo-form-inline">
            <el-form-item label="一级分类">
                <!-- 
                    在select中,如果想要显示option,select必须有双向绑定一个值,值是下边所有option的某一个value属性值(收集的是value属性值)
                 -->
                <el-select placeholder="请选择" @change="category1Change" v-model="(category1Id as number)">
                    <el-option v-for="item in categoryList1" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <!-- 
                    在select中,如果想要显示option,select必须有双向绑定一个值,值是下边所有option的某一个value属性值(收集的是value属性值)
                 -->
                <el-select placeholder="请选择" @change="category2Change" v-model="(category2Id as number)">
                    <el-option v-for="item in categoryList2" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <!-- 
                    在select中,如果想要显示option,select必须有双向绑定一个值,值是下边所有option的某一个value属性值(收集的是value属性值)
                 -->
                <el-select placeholder="请选择" v-model="(category3Id as number)">
                    <el-option v-for="item in categoryList3" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
      name: "Category",
  });
  </script>
  
  <script setup lang="ts">
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia';

//引入attr仓库
import useAttrStore from '@/stores/attr'
//获取attr仓库实例对象
const attrStore = useAttrStore()
//接受attr仓库中的state数据
const { categoryList1, category1Id,categoryList2, category2Id,categoryList3, category3Id } = storeToRefs(attrStore)

//接受一个变量,控制三级列表是否被禁用
defineProps<{
    disabled:boolean
}>()

//初始化操作
onMounted(() => {
    //调用store中的方法,发送1级分类请求
    attrStore.getCategory1()
});

//一级分类被选择后,处理二级分类请求
const category1Change = ()=>{
    //先清空二级和三级的所有数据
    categoryList2.value=[], 
    category2Id.value=null,
    categoryList3.value=[], 
    category3Id.value=null
    //调用方法,发送2级分类请求
    attrStore.getCategory2()
}
//二级分类被选择后,处理三级分类请求
const category2Change= ()=>{
    //先清空三级的所有数据
    categoryList3.value=[], 
    category3Id.value=null
    //调用方法,发送3级分类请求
    attrStore.getCategory3()
}

</script>
  